<template>
  <div class="dashboard-container">
    <el-row>行健毕业生二手家电</el-row>
    <el-row>本系统不放支付系统，需要现场支付</el-row>
    <el-divider />
    <div style="margin-top: 15px">
      <el-input v-model="params.search" placeholder="请输入关键字" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getData" />
      </el-input>
    </div>
    <el-divider />
    <el-radio-group v-model="params.type" @input="getData">
      <el-radio label="全部" border />
      <el-radio v-for="type in typeList" :label="type" border />
    </el-radio-group>
    <el-divider />
    <ul style="text-align: center">
      <li v-for="e in list" class="list">
        <el-link :underline="false" :href="'/#/product/detail/'+e.id" style="font-size: 1vw;">
          <el-image
            class="img"
            :src="'http://localhost:8082/api/comm/'+e.imageList[0]"
            fit="scale-down"
            style="width: 200px;"
          >
            <div slot="error" class="image-slot">
              <el-empty description="暂无图片" />
            </div>
          </el-image>

          <el-row>
            {{ e.oldLevel }} - {{ e.name }} - {{ e.price }}
          </el-row>
        </el-link>
      </li>
    </ul>
    <div class="bulletChat">
      <el-card class="box-card" style="margin-bottom: 5%" :hidden="bulletHidden1">
        <div slot="header" class="clearfix">
          <span>交流弹幕</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="bulletHidden1=true">关闭</el-button>
        </div>
        <p>卖家发布</p>
        <div v-for="o in bulletChat1" :key="o" class="text item">
          <span>{{ o.seller }} 发布了 - {{ o.productEntity.name }}  于 {{ o.createdAt }} </span>
        </div>
      </el-card>

      <el-card class="box-card" :hidden="bulletHidden2">
        <div slot="header" class="clearfix">
          <span>交流弹幕</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="bulletHidden2=true">关闭</el-button>
        </div>
        <p>买家成交</p>
        <div v-for="o in bulletChat2" :key="o" class="text item">
          <span>{{ o.buyer }} 买到了 - {{ o.productEntity.name }} 于 {{ o.createdAt }} </span>
        </div>
      </el-card>
    </div>

    <div class="tools">
      <el-button type="primary" icon="el-icon-goods" round style="margin: 1%;" @click="toCar">购物车</el-button>
      <el-button type="info" icon="el-icon-circle-plus-outline" round style="margin: 1%;" @click="toSell">我要发布
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getListComm, IMAGE_API, urlGetComm } from '@/api/comm'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      list: [],
      typeList: [],
      listLoading: true,
      image_api: IMAGE_API + '/api/file/img/',
      module: 'product',
      params: {
        flow: '通过',
        type: null
      },
      bulletChat1: [],
      bulletChat2: [],
      bulletHidden1: false,
      bulletHidden2: false
    }
  },
  created() {
    this.getTypeList()
    this.getData()
    var that = this
    that.getBulletChat()
    setInterval(function() {
      that.getBulletChat()
    }, 5000)
  },
  methods: {
    getBulletChat() {
      urlGetComm('/log/list', { 'type': 'release' }).then(response => {
        this.bulletChat1 = response.data
        console.log(this.bulletChat1)
      })
      urlGetComm('/log/list', { 'type': 'transaction' }).then(response => {
        this.bulletChat2 = response.data
      })
    },
    getData() {
      if (this.params.type === '全部') {
        this.params.type = null
      }
      this.listLoading = true
      getListComm(this.module, this.params).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    getTypeList() {
      this.listLoading = true
      urlGetComm('/product/list/type').then(response => {
        this.typeList = response.data
        this.listLoading = false
      })
    },
    toCar() {
      this.$router.push('/product/car')
    },
    toSell() {
      this.$router.push('/product/add')
    }
  }
}
</script>

<style lang="scss" scoped>

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.list {
  width: 400px;
  height: 300px;
  margin: 0.5vw;
  float: left;
  list-style: none;
}

.tools {
  width: 150px;
  height: 100px;
  position: fixed;
  right: 3%;
  bottom: 3%;
}

.bulletChat {
  width: 300px;
  font-size: 10px;
  position: fixed;
  right: 3%;
  top: 20%;

}

</style>
